﻿@{
    ViewBag.Title = "Employees";
}
<h1>
    Manage Employees</h1>
<div align="center">
    <table id="jqgEmployees" cellpadding="0" cellspacing="0">
    </table>
    <div id="jqgpEmployees" style="text-align: center;">
    </div>
</div>
@section JavaScript{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqgEmployees').jqGrid({
                //url from which data should get
                url: '@Url.Action("Employees")',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'POST',
                //columns names
                colNames: ['Emp Id', 'First Name', 'MiddleName', 'Last Name', 'Address', 'City', 'State', 'Zip', 'MobileNo', 'Extension', 'HomePhone', 'Email', 'Gender', 'DateOfBirth', 'MartialStatus', 'DegreeAttained', 'Skills', 'Experience', 'ResumeSize', 'Resume', 'Designation Name', 'Department Name'],
                //columns model
                colModel: [
                    { name: 'EmpId', index: 'EmpId', align: 'left', editable: false, width: 80 },
                    { name: 'FirstName', index: 'FirstName', align: 'left', editable: true, edittype: 'text', width: 100, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 1} },
                    { name: 'MiddleName', index: 'MiddleName', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 2} },
                    { name: 'LastName', index: 'LastName', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 1, colpos: 3} },
                    { name: 'Address', index: 'Address', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 1} },
                    { name: 'City', index: 'City', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 2} },
                    { name: 'State', index: 'State', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 2, colpos: 3} },
                    { name: 'Zip', index: 'Zip', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 1} },
                    { name: 'MobileNo', index: 'MobileNo', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 2} },
                    { name: 'Extension', index: 'Extension', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 3, colpos: 3} },
                    { name: 'HomePhone', index: 'HomePhone', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 4, colpos: 1} },
                    { name: 'Email', index: 'Email', align: 'left', editable: true, edittype: 'text', width: 150, hidden: false, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 4, colpos: 2} },
                    { name: 'Gender', index: 'Gender', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 4, colpos: 3} },
                    { name: 'DateOfBirth', index: 'DateOfBirth', align: 'left', editable: true, edittype: 'text', hidden: true,
                        editoptions: {
                            size: 10, maxlengh: 10,
                            dataInit: function (element) {
                                $(element).datepicker({ dateFormat: 'yy/mm/dd' });
                            }
                        },
                        editrules: { required: true, edithidden: true },
                        formoptions: { rowpos: 5, colpos: 1 }
                    },
                    { name: 'MartialStatus', index: 'MartialStatus', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 5, colpos: 2} },
                    { name: 'DegreeAttained', index: 'DegreeAttained', align: 'left', editable: true, edittype: 'text', hidden: true, editoptions: { maxlength: 40 }, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 5, colpos: 3} },
                    { name: 'Skills', index: 'Skills', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, hidden: true, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 6, colpos: 1} },
                    { name: 'Experience', index: 'Experience', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, hidden: true, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 6, colpos: 2} },
                    { name: 'ResumeSize', index: 'ResumeSize', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 400 }, hidden: true, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 6, colpos: 3} },
                    { name: 'Resume', index: 'Resume', align: 'left', editable: true, edittype: 'text', editoptions: { maxlength: 40 }, hidden: true, editrules: { required: true, edithidden: true }, formoptions: { rowpos: 7, colpos: 1} },
                    { name: 'DesignationName', index: 'DesignationName', align: 'left', editable: true, edittype: 'select', width: 150,
                        editoptions: { multiple: false,
                            size: 1,
                            dataUrl: '@Url.Action("GetDesignations", "Employee")',
                            buildSelect: function (data) {
                                var response = jQuery.parseJSON(data);
                                var s = '<select>';
                                if (response && response.length) {
                                    for (var i = 0, l = response.length; i < l; i++) {
                                        var ri = response[i];
                                        s += '<option value="' + ri + '">' + ri + '</option>';
                                    }
                                }
                                return s + "</select>";
                            }
                        },
                        editrules: { required: true },
                        formoptions: { rowpos: 7, colpos: 2 }
                    },
                    { name: 'DepartmentName', index: 'DepartmentName', align: 'left', editable: true, hidden: true, edittype: 'select',
                        editoptions: { multiple: false,
                            size: 1,
                            dataUrl: '@Url.Action("GetDepartments", "Employee")',
                            buildSelect: function (data) {
                                var response = jQuery.parseJSON(data);
                                var s = '<select>';
                                if (response && response.length) {
                                    for (var i = 0, l = response.length; i < l; i++) {
                                        var ri = response[i];
                                        s += '<option value="' + ri + '">' + ri + '</option>';
                                    }
                                }
                                return s + "</select>";
                            }
                        },
                        editrules: { required: true, edithidden: true },
                        formoptions: { rowpos: 7, colpos: 3}
                    },
                ],
                //pager for grid
                pager: $('#jqgpEmployees'),
                //number of rows per page
                rowNum: 5,
                //initial sorting column
                sortname: 'EmpId',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total record count
                viewrecords: true,
                //grid height
                height: '100%'
            });
            $('#jqgEmployees').jqGrid('navGrid', '#jqgpEmployees',
                { add: true, del: true, edit: true, search: false },
                { width: 'auto', url: '@Url.Action("UpdateEmployee")' },
                { width: 'auto', url: '@Url.Action("InsertEmployee")' },
                { width: 'auto', url: '@Url.Action("DeleteEmployee")' });
        });
    </script>
}
@section PageDescription{
    <h1>
        Employee</h1>
        <h3>Employee details</h3>
      
    <p>
        This maintains all relevant employee related information, including different types of personal information,
         detailed qualifications and work experience, job related information etc. 
         Information captured here is utilized by all other modules, thus eliminating data redundancy.</p>
}
